﻿@page "/datepicker"
@page "/docs/guides/components/datepicker.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    DatePicker
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>DatePicker</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a date/time picker with two-way data binding, optional time selection with configurable hour formats, time-only mode, special and disabled dates, initial view date and year range configuration, min/max date restrictions, customizable UI elements (no button/no input box), custom footer templates, custom input parsing, calendar view, multiple date selection, year/month selection, and support for <code>DateOnly</code>/<code>TimeOnly</code> types.
</RadzenText>

<RadzenText Anchor="datepicker#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of DatePicker
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>DatePicker</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerBindValue">
    <DatePickerBindValue />
</RadzenExample>

<RadzenText Anchor="datepicker#value-and-change-event" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Get and Set the value of DatePicker using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerChangeEvent">
    <DatePickerChangeEvent />
</RadzenExample>

<RadzenText Anchor="datepicker#datepicker-with-time" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with time
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ShowTime="true"</code> to enable time selection alongside date selection.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerWithTime">
    <DatePickerWithTime />
</RadzenExample>

<RadzenText Anchor="datepicker#hour-format" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Define hour format
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>HoursStep</code>, <code>MinutesStep</code>, and <code>SecondsStep</code> properties to configure time picker increments.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerHourFormat">
    <DatePickerHourFormat />
</RadzenExample>

<RadzenText Anchor="datepicker#time-only-datepicker" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Time-only DatePicker
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>TimeOnly="true"</code> to display only the time picker without the date calendar.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerTimeOnly">
    <DatePickerTimeOnly />
</RadzenExample>

<RadzenText Anchor="datepicker#special-disabled-dates" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with special or disabled dates
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>DateAttributes</code> property to highlight specific dates or disable certain dates from selection.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerSpecialDates">
    <DatePickerSpecialDates />
</RadzenExample>

<RadzenText Anchor="datepicker#initial-view-date-and-year-change" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with initial view date and year range
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>InitialViewDate</code>, <code>YearRange</code>, and <code>InitialView</code> properties to control the calendar's starting view.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerInitialViewDate">
    <DatePickerInitialViewDate />
</RadzenExample>

<RadzenText Anchor="datepicker#min-max-dates" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Set Min and Max dates
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Min</code> and <code>Max</code> properties to restrict date selection to a specific range.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerMinMax">
    <DatePickerMinMax />
</RadzenExample>

<RadzenText Anchor="datepicker#no-button" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with no button
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>ShowButton="false"</code> to hide the calendar icon button and open the picker by clicking the input field.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerNoButton">
    <DatePickerNoButton />
</RadzenExample>

<RadzenText Anchor="datepicker#no-inputbox" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with no input box
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Hide the input field to display only the calendar button for date selection.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerNoInputBox">
    <DatePickerNoInputBox />
</RadzenExample>

<RadzenText Anchor="datepicker#custom-footer" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with custom footer
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>FooterTemplate</code> property to add custom content at the bottom of the date picker calendar.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerFooterTemplate">
    <DatePickerFooterTemplate />
</RadzenExample>

<RadzenText Anchor="datepicker#custom-input-parsing" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker with custom input parsing
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The Radzen Blazor <strong>DatePicker</strong> has a parameter named <code>ParseInput</code> which allows for a fully custom parse-method. This way you can accept inputs like '3012' or '30122023' and support more than one input-format. Click on the 'Edit Source' to see the implementation.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerParseInput">
    <DatePickerParseInput />
</RadzenExample>

<RadzenText Anchor="datepicker#calendar" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker as calendar
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Inline="true"</code> to display the DatePicker as an always-visible calendar without an input field.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerCalendar">
    <DatePickerCalendar />
</RadzenExample>

<RadzenText Anchor="datepicker#multiple" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Multiple dates selection
 </RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Multiple="true"</code> to enable selection of multiple dates in the calendar.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerMultiple">
    <DatePickerMultiple />
</RadzenExample>

<RadzenText Anchor="datepicker#year-month-selection" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker for year/month selection
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Configure the DatePicker to select only years or months by setting the appropriate view mode.
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerYearMonth">
    <DatePickerYearMonth />
</RadzenExample>

<RadzenText Anchor="datepicker#dateonly-timeonly" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    DatePicker binds to types DateOnly or TimeOnly
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    <code>Value</code> property can be bound to values of type <code>DateOnly</code> or <code>TimeOnly</code>
</RadzenText>
<RadzenExample ComponentName="DatePicker" Example="DatePickerWithDateOnlyTimeOnly">
    <DatePickerWithDateOnlyTimeOnly />
</RadzenExample>


<RadzenText Anchor="datepicker#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DatePicker component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a DatePicker component." },
        new KeyboardShortcut { Key = "Tab on open popup", Action = "Navigate forward across available picker components." },
        new KeyboardShortcut { Key = "Shift + Tab on open popup", Action = "Navigate backward across available picker components." },
        new KeyboardShortcut { Key = "RightArrow on open popup", Action = "Select previous day." },
        new KeyboardShortcut { Key = "LeftArrow on open popup", Action = "Select next day." },
        new KeyboardShortcut { Key = "UpArrow on open popup", Action = "Select same day from previous week." },
        new KeyboardShortcut { Key = "DownArrow on open popup", Action = "Select same day from next week." },
        new KeyboardShortcut { Key = "Enter in an opened popup", Action = "Select the focused day and close the popup." },
        new KeyboardShortcut { Key = "Esc in an opened popup", Action = "Close the popup." }
    };
}
